<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <!--导入jQuery-->
    <script src="js/jquery-3.5.1.min.js"></script>
</head>
<body>
    <!--style标签是全局(公有)，style属性只对当前元素生效(私有)-->
    <div class="container" style="width:300px;margin-top: 50px;">
       <fieldset>
           <legend>登录</legend>
           <div class="form-group">
               <label for="username">用户名:</label>
              <!--关闭自动完成，鼠标点击输入框不会弹出内容-->
               <input class="form-control" 
               autocomplete="off"
               type="text" name="username" id="username" /> 
            </div>
            <div>
                <label>密码:</label>
                <input type="password" name="password" id="password" />
            </div>
            <div>
                <button id="btnSave" class="btn btn-primary" onclick="save()">保存</button>
                <button id="btnClear" class="btn btn-danger" onclick="jsclear()">取消</button>
            </div>
       </fieldset>  
    </div>
</body>
   <script>
      function save(){
          //获取页面id为username的input中的值
      console.log( $("#username").val());
      console.log($("#password").val());
      }
    
       function jsclear(){
          $("#username").val("");
          $("#password").val("");
       }
//上面的方式前期绑定，jQuery后期绑定(js),动态给按钮添加事件
//后期绑定实现步骤:1）获取按钮 2)click这里没有on 3)写匿名函数(安全)
$("#btnSave").click(function(){
    var username = $("username").val();
    var password = $("#password").val();
    console.log(username+password);
})
$("#btnClear").click(function(){
    $("username").val("");
    $("password").val("");  
})

   </script>
</html>